@import url("https://fonts.googleapis.com/css?family=Sofia");

body{
    background-image: linear-gradient(45deg, #7A88FF, #7AFFAF);
}

:root {
  --success-color: #2ecc71;
  --error-color: #e74c3c;
}

.form{
	position: absolute;
	top: 40%;
	margin-top: -200px;
	left: 50%;
	margin-left: -200px;
	/*absolute居中的方法*/
	background-color: whitesmoke;
	width: 400px;
	border-radius: 25px;
	text-align: center;
	padding: 5px 40px;
	box-sizing: border-box;
	/*padding不会影响大小*/
	box-shadow: 0 4px 8px 7px rgba(0, 0, 0, 0.2), 0 6px 20px 7px rgba(0, 0, 0, 0.19);
}

input{
	background-color: whitesmoke;
	width: 100%;
	height: 48px;
	margin-bottom: 10px;
	border: none;
	border-bottom: 2px solid silver;
	outline: none;
	font-size: 22px;
}

.form-control {
  margin-bottom: 10px;
  padding-bottom: 20px;
  position: relative;
}

.form-control small{
	visibility: hidden;
	color: var(--error-color);
	position: absolute;
	bottom: 0;
	left: 0;
}

.form-control.success input {
  border-color: var(--success-color);
}

.form-control.error input {
  border-color: var(--error-color);
}


.form-control.error small{
	visibility: visible;
}

input::placeholder{
	font-family: "Sofia";
	font-size: 22px;
}

h2{
	font-family: "Sofia";
	font-size: 42px;
}


#btn{
	background-color: #59c2c5;
	height: 48px;
	border-radius: 8px;
	margin-top: 30px;
	margin-bottom: 20px;
	font-size: 28px;
	font-weight: 600;
	color: white;
	font-family: "Microsoft JhengHei";
}

button:hover{
	background-color: #59c2a0;
}